<script type="text/javascript" src="<?= base_url() ?>scripts/users.js"></script>		
<script>
	$(document).ready(function() {
		$('#new_user_button').nyroModal({closeButton:''});
		$('#user_columns_button').nyroModal({closeButton:''});		
		
		fetch_users();
	});
</script>
<br />
<a id="new_user_button" href="#new-user-popup" class="btn"><span class="icon icon-add"></span>New User</a>
<div id="new-user-popup" class="popup">
	<? $this->load->view('users/new_view') ?>
</div>
<br /><br />

<div class="content_box left">
	<header>
		<div class="label">
			<img src="<?= base_url() ?>images/icons/information.png" alt=""><div>Search</div>		
		</div>	
	</header>
	<section>
		<form onsubmit="return false;">
			<table>
				<tr>
					<td>
						Search
					</td>
					<td>
						<input type="text" name="search_value" onkeypress="search_value_changed()" />
					</td>
				</tr>
				<tr>
					<td>
						By:
					</td>					
					<td><input type="radio" id="search_username" name="search_by" value="username" onclick="search_value_changed()" checked /><label for="search_username">Username</label></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="radio" id="search_firstname" name="search_by" value="first_name" onclick="search_value_changed()" /><label for="search_firstname">First Name</label></td>
				</tr>				
				<tr>
					<td></td>
					<td><input type="radio" id="search_lastname" name="search_by" value="last_name" onclick="search_value_changed()" /><label for="search_lastname">Last Name</label></td>
				</tr>								
				<tr>
					<td></td>
					<td><input type="radio" id="search_employee_id" name="search_by" value="employee_id" onclick="search_value_changed()" /><label for="search_employee_id">Employee ID</label></td>
				</tr>								
				<tr>
					<td></td>
					<td><input type="radio" id="search_department" name="search_by" value="department.name" onclick="search_value_changed()" /><label for="search_department">Department</label></td>
				</tr>				
			</table>
		</form>
	</section>
</div>

<div class="content_box right">
	<header>
		<div class="label">
			<img src="<?= base_url() ?>images/icons/information.png" alt=""><div>Users</div>		
		</div>	
		<div class="actions">
			<a id="user_columns_button" href="#user-columns-popup" class="btn"><span class="icon icon-table"></span>Columns</a>
			<div id="user-columns-popup" class="popup">
				<? $this->load->view('users/columns_view') ?>
			</div>			
		</div>		
	</header>
	<section>
		<form>
			<table id="user_table" style="width:100%;">			
				<tr>
					<th style="width:100px;" class="col_actions">
						Actions
					</th>			
					<th class="col_username">
						Username
					</th>			
					<th class="col_firstname">
						First Name
					</th >	
					<th class="col_lastname">
						Last Name
					</th >
					<th class="col_employee_id">
						Employee ID
					</th>					
					<th class="col_department">
						Department
					</th>
				</tr>		
				<tr id="table_loader" class="ajax_loader"><td colspan="6"><div><img src="<?= base_url() ?>images/ajax_loader.gif"/></div></td></tr>							
			</table>
			<div style="padding:5px;"><a href="javascript: fetch_users(-1);" class="disabled" id="previous_button">Prev</a><a style="float:right;" href="javascript: fetch_users(1);" id="next_button">Next</a></div>
		</form>
	</section>
</div>
